<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<form>
				账号：<input type="text" v-model="account"> <br><br>
				密码：<input type="password" v-model="password"> <br><br>
				性别：
					男<input type="radio" name="gender" v-model="gender" value="male"> &nbsp; 
					女<input type="radio" name="gender" v-model="gender" value="female"> &nbsp;
					<br><br>
				爱好：
					抽烟<input type="checkbox" v-model="hobby" value="smoke">
					喝酒<input type="checkbox" v-model="hobby" value="drinks">
					烫头<input type="checkbox" v-model="hobby" value="hair"> <br><br>
				所属校区：
					<select v-model="city">
						<option value="">请选择校区</option>
						<option value="beijing">北京</option>
						<option value="shenzhen">深圳</option>
						<option value="shanghai">上海</option>
						<option value="wuhuan">武汉</option>
						<option value="xian">西安</option> 
					</select> <br><br>
				其他信息：<textarea v-model="other"></textarea> <br><br>
				<input type="checkbox" v-model="agree"> 阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<br><br>
				<button>提交</button>
			</form>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					account:'', //账户
					password:'', //密码
					gender:'',//性别
					hobby:[],
					city:'',
					other:'',
					agree:false
				}
			})
		</script>
	</body>
</html>